// var data = document.getElementById("data").value;
// var data1 = 4;
// var data2 = document.getElementById("data2").value;

var data3 = document.getElementById("data1").value;
var str = data3.substring(1, data3.length - 1);
console.log(str);
var arr = str.split(", ");
console.log(arr);
const fruits = new Map();
for (let i = 0; i < arr.length; i++) {
    var arr1 = arr[i].split("=");
    fruits.set(arr1[0], arr1[1]);
}
console.log(fruits);
for (let i = 0; i < fruits.size; i++) {
    var arr2 = Array.from(fruits.keys()) ;
    console.log(arr2);
    var arr3 = Array.from(fruits.values());
    console.log(arr3);
}
var arr4 = [
    '#0a3dbf',
    '#e84141',
    '#44a246',
    '#FFA500',
    '#800080',
    '#FFC0CB',
    '#48D1CC',
    '#FFD700',
    '#FF6347',
    '#FF00FF',
];
var arr5 = [];
for (let i = 0; i < fruits.size; i++) {
    arr5[i] = arr4[i];
}
new Chart(document.getElementById('chart-S').getContext('2d'), {
    type: 'doughnut',
    data: {
        labels: arr2,
        datasets: [{
            label: 'Dataset 1',
            data: arr3,
            backgroundColor: arr5,
            hoverOffset: 4
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: '答案饼状图'
            }
        }
    }
});